import React, { Component } from 'react';
import {
	StyleSheet, Text, View, Image, TouchableOpacity, Alert
} from "react-native";
import { GLOBAL } from '../../../config/global';
import { style } from '../../../theme/style';
import ToastUtil from '../../../utils/toast';
import navigationSeevice from '../../../components/navigation/navigationSeevice';
import { API, API_GENERATE } from '../../../config/api';
import HTTP from '../../../utils/http';

const scale = GLOBAL.SCALE;
export class Block extends Component {
	constructor(props) {
		super(props);
		this.state = {};
		this.openAlert = false; // 控制发票录入
	}

	//发票扫码 点击
	_goScan = () => {
		this.openAlert = false;
		navigationSeevice.navigate('BarcodeScan', {
			callback: (data) => {
				this._goScanCallBack(data);
			}
		})
	}

	//发票扫码 回调
	_goScanCallBack = (data) => {
		if (this.openAlert) return;
		if (data && data.nativeEvent.data.code) {
			this.codeKey = data.nativeEvent.data.code;
			let codeNo = this.codeKey.split(',')[3];
			if (!codeNo) {
				ToastUtil.showWarning('录入失败'); return;
			}
			this.openAlert = true;
			Alert.alert('操作',
				`发票号码：${codeNo}`,
				[{
					text: '确认录入',
					onPress: async () => {
						this.setState({
							pageStatus: 'loading'
						})
						let res = await HTTP.POST(API_GENERATE(API.DO_SCAN), { saveFlag: true, scanQrCode: this.codeKey });
						this.setState({
							pageStatus: 'data'
						}, () => {
							if (res) {
								ToastUtil.showSuccess('录入成功')
							}
						})
					}
				}, {
					text: '取消',
					style: 'cancel'
				},
				]);
		} else {
			ToastUtil.showWarning('录入失败');
		}
	}

	_onPress = (itemData) => {
		console.log('itemData.pageUrl', itemData.pageUrl)
		let { choice } = this.props;
		if (itemData.callBack) { //发票扫描
			this._goScan()
		} else {  // 页面跳转
			itemData.parames = itemData.parames || {};
			itemData.parames.choice = choice || {};
			itemData.pageUrl && navigationSeevice.navigate(itemData.pageUrl, itemData.parames || null);
		}
	}

	render() {
		let { sourceData } = this.props;
		let { title, data } = sourceData || {};
		return (
			<View style={[styles.block]}>
				<View style={styles.blockHead}>
					<Text>{title || ''}</Text>
				</View>
				<View style={styles.blockBody}>
					{
						data && data.map((item, index) => {
							return (
								<TouchableOpacity onPress={() => { this._onPress(item) }} style={styles.blockItem} key={index}>
									<Image style={styles.blockImg} source={item.icon} />
									<Text style={styles.blockText}>{item.cntName || '-'}</Text>
									{
										item.incompletedCnt ? <View style={styles.blockTip}>
											<Text style={[styles.blockTipText, item.cntName == '审批中业务' ? styles.blockTipActive : null]}>{item.incompletedCnt}</Text>
										</View> :
											<View style={[styles.blockTip, { backgroundColor: "rgba(0,0,0,0)" }]}>
												<Text style={styles.blockTipText}></Text>
											</View>
									}
								</TouchableOpacity>
							)
						})
					}
				</View>
			</View>
		)
	}
}
const styles = StyleSheet.create({
	block: {
		//marginTop: 20 * scale,
		marginBottom: 20 * scale,
		width: 345 * scale,
		backgroundColor: style.color.white,
		borderRadius: 5 * scale,
		marginLeft: 15 * scale,
		marginRight: 15 * scale,
	},
	blockHead: {
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'space-between',
		height: 40 * scale,
		paddingLeft: 15 * scale,
		paddingRight: 15 * scale
	},
	blockTitle: {
		fontSize: 14 * scale
	},
	blockBody: {
		flexDirection: 'row',
		alignItems: 'center',
		flexWrap: 'wrap',
	},
	blockItem: {
		width: '25%',
		alignItems: 'center',
		justifyContent: 'center',
		paddingTop: 10 * scale
	},
	blockImg: {
		width: 40 * scale,
		height: 40 * scale,
	},
	blockText: {
		paddingTop: 10 * scale,
		paddingBottom: 20 * scale,
		fontSize: 12 * scale
	},
	blockTip: {

		//position: 'absolute',
		//top: 5 * scale,
		//left: 50 * scale,
		position: 'relative',
		top: -85 * scale,
		left: 20 * scale,
		paddingLeft: 5 * scale,
		paddingRight: 5 * scale,
		borderRadius: 5 * scale,
		overflow: 'hidden',
		backgroundColor: style.color.fontRed1,
	},
	blockTipText: {
		fontSize: 10 * scale,
		color: style.color.white,
	},
	blockTipActive: {
		//backgroundColor: '#26C8FC',
	}

})